import React, { useState } from 'react';
import {Input, Modal, Button,Radio,Row, Col,Form, Select,InputNumber  } from 'antd';
const Index = () => {


    function onChange(value) {
  console.log('changed', value);
}
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal= () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  const { Option } = Select;
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const validateMessages = {
    required: '${label} is required!',
    types: {
      email: '${label} is not a valid email!',
      number: '${label} is not a valid number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };
  /* eslint-enable no-template-curly-in-string */
  
  const [value, setValue] = React.useState(1);

  const onChange1 = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  return (
    <>
     <Button  onClick={showModal} block>
        修改
      </Button>
      <Modal title="编辑商户" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} width={1000}>
    <Form {...layout} name="nest-messages"  validateMessages={validateMessages}>
      基本信息
    <Form.Item name={['user', 'website']} label="上级用户">
    <Input  disabled   placeholder='平台'
               />
              
      </Form.Item>
      <Row>
        <Col span={12} >
      <Form.Item name={['user', 'name']} label="用户名" rules={[{ required: true }]}>
      <Input  disabled   placeholder='test-dl'
               />
      </Form.Item>
      </Col>
      <Col span={12} >
      <Form.Item name={['user', 'na']} label="商户名称" >
      <Input  defaultValue="test" rules={[{ required: true }]}/>
      </Form.Item>
      </Col>
      </Row>
     
      <Form.Item name={['user', 'users']} label="卡商" >
      <Select  style={{ width: '100%' }} placeholder="请选择" />
      </Form.Item>
     
      <Form.Item name={['user', 'passwd']} label="风控金额" rules={[{ required: true }]}>
      <InputNumber min={1} max={10} defaultValue="0.00" onChange={onChange} style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item name={['user', 'passwd']} label="订单冻结金额(元)" rules={[{ required: true }]}>
      <InputNumber min={1} max={10} defaultValue="0.00" onChange={onChange} style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item name={['user', 'pass']} label="充值费率(%)" rules={[{ required: true }]}>
        <Input defaultValue="0.00" />
      </Form.Item>
      <Form.Item name={['user', 'state']} label="账号状态" >
      <Radio.Group onChange={onChange1} value={value}>
      <Radio value={1}>正常</Radio>
      <Radio value={2}>冻结</Radio>
    </Radio.Group>
      </Form.Item>
      <Row>
      <Col span={12}>
      <Form.Item name={['user', 'sta']} label="代付状态" >
      <Radio.Group onChange={onChange1} value={value}>
      <Radio value={1}>正常</Radio>
      <Radio value={2}>冻结</Radio>
    </Radio.Group>
      </Form.Item>
     
      </Col>
      <Col span={12}>
      <Form.Item name={['user', 'pass']} label="代理权限" >
      <Radio.Group onChange={onChange1} value={value}>
      <Radio value={1}>关闭</Radio>
      <Radio value={2}>启用</Radio>
    </Radio.Group>
      </Form.Item>
      </Col>
      </Row>
  
    
    </Form>
      </Modal>
    </>
  );
  }
  export default Index;

